<template>
  <div class="toolbar">
    <div class="runBtn" :class="{ runBtnRun: isRun }" @click="onClickRunBtn">
      ▶
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { Emitter } from '@/ui-kit/index';
import { DialogOptions, Msg } from '@/ui-kit/dialog';
import preview from '../preview/preview.vue';
import * as PreviewMsg from '../preview/msg';

export default defineComponent({
  name: 'preview-btn',
  setup() {
    const isRun = ref(false);
    onMounted(() => {
      Emitter.on(PreviewMsg.Msg.ClosePreview, () => {
        isRun.value = false;
      });
    });
    return {
      isRun,
      onClickRunBtn() {
        isRun.value = !isRun.value;
        if (isRun.value) {
          const opts: DialogOptions = {
            title: '游戏预览',
            width: document.body.clientWidth * 0.8,
            height: document.body.clientHeight * 0.9,
            clickOutsideClose: false,
            comp: preview,
          };
          Emitter.emit(Msg.ShowDialog, opts);
        }
      },
    };
  },
});
</script>

<style scoped lang="scss">
.toolbar {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .flex1 {
    flex: 1;
  }

  .runBtn {
    user-select: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 20px;
    border: 1px solid #2c3e50;
    border-radius: 4px;
  }

  .runBtnRun {
    background-color: #666666;
  }
}
</style>
